// React核心库导入
import React, { useState, useEffect, useMemo, useCallback } from 'react';
// Ant Design组件库导入
import { Card, Row, Col, Statistic, Alert, Spin } from 'antd';
// Ant Design图标库导入
import {
  RobotOutlined,        // 机器人图标
  SettingOutlined,      // 设置图标
  FormOutlined,         // 表单图标
  DashboardOutlined     // 仪表板图标
} from '@ant-design/icons';
// 智能体服务层导入
import agentService from '@services/agentService';
// 性能优化Hook导入
import { usePerformanceMonitor, withPerformance } from '@hooks/usePerformance';
import { useCache } from '@hooks/useCache';
// 性能优化组件导入
import StatCard from '@components/Performance/StatCard';

/**
 * 仪表板统计数据接口
 * @interface DashboardStats
 * @property {number} totalAgents - 智能体总数
 * @property {number} activeAgents - 活跃智能体数量
 * @property {number} totalModelConfigs - 模型配置总数
 * @property {number} totalPromptTemplates - 提示词模板总数
 */
interface DashboardStats {
  totalAgents: number;
  activeAgents: number;
  totalModelConfigs: number;
  totalPromptTemplates: number;
}

/**
 * 仪表板组件 - 系统概览和数据统计
 *
 * 功能特性：
 * - 实时显示系统关键指标
 * - 统计智能体、模型配置和提示词模板数量
 * - 提供系统欢迎信息
 * - 错误处理和加载状态管理
 * - 性能优化：缓存、记忆化、防抖等
 *
 * @author CKY Agent Platform Team
 * @version 2.0.0
 * @lastModified 2024-01-22
 */
const Dashboard: React.FC = () => {
  // 性能监控（暂时移除显示以避免闪烁）
  usePerformanceMonitor('Dashboard');

  // 仪表板统计数据状态管理
  const [stats, setStats] = useState<DashboardStats>({
    totalAgents: 0,
    activeAgents: 0,
    totalModelConfigs: 0,
    totalPromptTemplates: 0,
  });

  /**
   * 异步获取仪表板数据
   * 使用记忆化优化函数性能
   */
  const fetchDashboardStats = useCallback(async (): Promise<DashboardStats> => {
    // 并行请求多个API，提高数据加载效率
    const [agentsResponse, modelConfigsResponse, promptTemplatesResponse] = await Promise.all([
      agentService.getAgents({}),
      agentService.getModelConfigs({}),
      agentService.getPromptTemplates({})
    ]);

    // 计算统计数据
    return {
      totalAgents: agentsResponse.totalCount,
      activeAgents: agentsResponse.items.filter(agent => agent.isActive).length,
      totalModelConfigs: modelConfigsResponse.totalCount,
      totalPromptTemplates: promptTemplatesResponse.totalCount,
    };
  }, []);

  // 使用缓存Hook优化数据获取
  const { data: cachedStats, loading, error } = useCache<DashboardStats>(
    'dashboard-stats',
    fetchDashboardStats,
    { ttl: 5 * 60 * 1000, staleWhileRevalidate: false } // 5分钟缓存，不启用staleWhileRevalidate
  );

  // 同步缓存数据到状态
  useEffect(() => {
    if (cachedStats) {
      setStats(cachedStats);
    }
  }, [cachedStats]);

  /**
   * 计算活跃智能体占比
   */
  const activeAgentRatio = useMemo(() => {
    return stats.totalAgents > 0 ? (stats.activeAgents / stats.totalAgents) * 100 : 0;
  }, [stats.totalAgents, stats.activeAgents]);

  /**
   * 加载状态显示
   * 显示加载动画，提供良好的用户体验
   */
  if (loading) {
    return (
      <div style={{ textAlign: 'center', padding: '50px' }}>
        <Spin size="large" />  {/* 大尺寸加载动画 */}
      </div>
    );
  }

  /**
   * 错误状态显示
   * 显示错误信息提示，便于用户了解问题原因
   */
  if (error) {
    return (
      <Alert
        message="错误"
        description={error instanceof Error ? error.message : String(error)}    // 显示具体的错误信息
        type="error"           // 错误类型警告
        showIcon               // 显示错误图标
        style={{ marginBottom: 24 }}
      />
    );
  }

  /**
   * 仪表板主要内容渲染
   * 使用性能优化的组件和记忆化优化
   */
  return (
    <div>
      {/* 暂时移除性能监控显示，避免无限循环渲染 */}

      {/* 统计卡片行 */}
      <Row gutter={[16, 16]}>
        {/* 智能体总数统计卡片 */}
        <Col xs={24} sm={12} md={6}>
          <StatCard
            title="智能体总数"
            value={stats.totalAgents}
            prefix={<RobotOutlined />}
            loading={loading}
          />
        </Col>

        {/* 活跃智能体统计卡片 */}
        <Col xs={24} sm={12} md={6}>
          <StatCard
            title="活跃智能体"
            value={stats.activeAgents}
            prefix={<RobotOutlined />}
            color="#3f8600"
            trend="up"
            trendValue={parseFloat(activeAgentRatio.toFixed(1))}
            loading={loading}
          />
        </Col>

        {/* 模型配置统计卡片 */}
        <Col xs={24} sm={12} md={6}>
          <StatCard
            title="模型配置"
            value={stats.totalModelConfigs}
            prefix={<SettingOutlined />}
            loading={loading}
          />
        </Col>

        {/* 提示词模板统计卡片 */}
        <Col xs={24} sm={12} md={6}>
          <StatCard
            title="提示词模板"
            value={stats.totalPromptTemplates}
            prefix={<FormOutlined />}
            loading={loading}
          />
        </Col>
      </Row>

      {/* 欢迎信息行 */}
      <Row gutter={[16, 16]} style={{ marginTop: 24 }}>
        <Col xs={24}>
          <Card title="欢迎使用 CKY Agent Platform" bordered={false}>
            <p>这是一个基于 .NET 9.0 + ABP vNext + React + Ant Design 的智能体平台。</p>
            <p>主要功能包括：</p>
            <ul>
              <li>智能体管理 - 创建、配置和管理 AI 智能体</li>
              <li>模型配置 - 支持多种 AI 模型提供商</li>
              <li>提示词模板 - 管理和复用提示词模板</li>
              <li>实时监控 - 智能体运行状态监控</li>
            </ul>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

// 使用性能优化高阶组件包装
export default withPerformance(Dashboard, { memoize: true });